<template>
	<div>
		<div class="header">
			<div class="icon">
				<i class="el-icon-arrow-left"></i><span @click="fanhui">返回</span>
			</div>
			<div>
				<div class="icon-r">
					 <router-link to="/Home/settlement" > <button v-if="details[0].totalorderTstStatus=='待支付' ">{{isPay()}}</button> </router-link>
                     <span class="ac" v-if="details[0].totalorderTstStatus=='已完成'">{{isPay()}}</span> 
				</div>

			</div>
		</div>
		<div class="contenter">
			<div class="content-l">

				<li><span>基本信息</span> </li>
				<el-table :data="details" border style="width: 100%">
					<el-table-column prop="totalorderNumber" label="订单编号" width="120">
					</el-table-column>
					<el-table-column prop="totalorderAccountnumber" label="会员账号" width="130">
					</el-table-column>
					<el-table-column prop="totalorderTstStatus" label="支付方式">
					</el-table-column>
					<el-table-column prop="totalorderIntegral" label="订单积分">
					</el-table-column>
				</el-table>
				<li> <span> 会员信息</span></li>
				<!-- {{details}} -->
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="name" label="会员姓名" width="80">
					</el-table-column>
					<el-table-column prop="type" label="会员类型" width="90">
					</el-table-column>
					<el-table-column prop="num" label="会员卡号">
					</el-table-column>
					<el-table-column prop="state" label="会员状态">
					</el-table-column>
				</el-table>
				<li><span> 费用信息</span></li>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="totalConsumption" label="消费合计" width="80">
					</el-table-column>
					<el-table-column prop="coupons" label="优惠券" width="90">
					</el-table-column>
					<el-table-column prop="pointsDeduction" label="积分抵扣">
					</el-table-column>
					<el-table-column prop="discounts" label="活动优惠">
					</el-table-column>
				</el-table>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="deduction" label="抵扣金额" width="80">
					</el-table-column>
					<el-table-column prop="maLing" label="抹零" width="90">
					</el-table-column>
					<el-table-column prop="totalAmount" label="订单总金额">
					</el-table-column>
					<el-table-column prop="amountPayable" label="应付款金额">
					</el-table-column>
				</el-table>

			</div>
			<div class="content-r">
				<li><span>操作信息</span> </li>
				<el-table :data="details" border style="width: 100%">
					<el-table-column prop="totalorderCustomer" label="操作者" width="70">
					</el-table-column>
					<el-table-column prop="totalorderStarttime" label="操作时间" width="150">
					</el-table-column>
					<el-table-column prop="totalorderTstStatus" label="订单状态" width="90">
					</el-table-column>
					<el-table-column prop="totalorderTstStatus" label="付款状态" width="75">
					</el-table-column>
					<el-table-column prop="" label="发货状态" width="63">
					</el-table-column>
					<el-table-column prop="" label="备注" width="60">
					</el-table-column>
				</el-table>
				<li><span>消费信息</span> </li>
				<el-table :data="details[0].nfuhOrderList" border style="width: 100%">
					<el-table-column prop="orderServicetype" label="消费项目" width="175">
					</el-table-column>
					<el-table-column prop="orderTechnician" label="技师" width="85">
					</el-table-column>
					<el-table-column prop="orderPrice" label="价格" width="75">
					</el-table-column>
					<el-table-column prop="orderNumber" label="数量" width="85">
					</el-table-column>
					<el-table-column prop="orderPrice" label="小计" width="75">
					</el-table-column>
				</el-table>
				<div class="box">
					<div>合计：￥<span class="red">{{details[0].totalorderPrice}}.00</span> </div>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
 import { createNamespacedHelpers } from 'vuex'
 const {mapState} = createNamespacedHelpers('order')
	export default {
		data() {
			return {
				tableData: [{
					name: '张丽',
					type: '黄金会员',
					num: 'No.526354',
					state: '有效',
					totalConsumption: '￥200.00',
					coupons: '-￥0.00',
					pointsDeduction: '-￥0.00',
					discounts: '-￥10.00',
					deduction: '-￥0.00',
					maLing: '-￥0.10',
					totalAmount: '￥210.10',
					amountPayable: '￥200.00',
					operator: '李玲',
					time: '2019-02-03 13:25:53',
					paymentStatus: '未付款',
				
				}],
			}
		},
		
		computed:{
			...mapState(['details']),
			// total(){
			//    var total = 0
			// //    console.log(this.details[0].nfuhOrderList);
			//  this.details[0].nfuhOrderList.forEach( (item,index) =>  {
			// 	total +=item.orderPrice
			// 	})
			// 	return total
			// },
		},
		methods:{
			 isPay(){
                if(this.details[0].totalorderTstStatus=='已完成'){
                     this.cc=true
                    return '已付款'
                   
                }else{
                    this.cc=false
                    return '结算'
                }
            },
			fanhui(){
				this.$router.push('orderList')
			}
		}

	}
</script>

<style lang="scss" scoped src="../../css/order/settlement.scss"></style>